import classNames from 'classnames';

/*
  组件封装时如何保证组件的健壮性和灵活性？
    健壮性：不能让组件导致页面报错、页面崩溃
      1. 借助于： PropsTypes 或TS保证类型提示，减少用户使用的错误
      2. 善用可选取值范围，减少用户使用的错误
    灵活性：
      1. 通常开放需要变化的属性，常用的有style和className
      2. 开放原生的属性
*/

interface IIconProps extends React.SVGProps<SVGSVGElement> {
  type: IconType;
}

export default function Icon({ type, className, ...restProps }: IIconProps) {
  const svgCls = classNames('icon', className);
  return (
    <svg className={svgCls} aria-hidden="true" {...restProps}>
      <use xlinkHref={`#${type}`}></use>
    </svg>
  );
}

type IconType =
  | 'iconphoto-fail'
  | 'iconphoto'
  | 'iconbtn_right'
  | 'iconicon_unenjoy1'
  | 'iconicon_feedback1'
  | 'iconicon_upload'
  | 'iconbianji'
  | 'icongengduo'
  | 'iconfanhui'
  | 'iconbtn_history1'
  | 'iconbtn_readingtime'
  | 'iconbtn_like2'
  | 'iconbtn_pic'
  | 'iconbtn_mine'
  | 'iconbtn_channel'
  | 'iconbtn_channel_close'
  | 'iconbtn_comment'
  | 'iconbtn_home_sel'
  | 'iconbtn_collect_sel'
  | 'iconbtn_mine_sel'
  | 'iconbtn_collect'
  | 'iconbtn_qa_sel'
  | 'iconbtn_like_sel'
  | 'iconbtn_feedback'
  | 'iconbtn_del'
  | 'iconbtn_tag_close'
  | 'iconbtn_essay_close'
  | 'iconbtn_qa'
  | 'iconbtn_myworks'
  | 'iconicon_blacklist'
  | 'iconbtn_mycollect'
  | 'iconbtn_video_sel'
  | 'iconbtn_share'
  | 'iconbtn_mymessages'
  | 'iconbtn_search'
  | 'iconbtn_like'
  | 'iconbtn_xiaozhitongxue'
  | 'iconbtn_video'
  | 'iconbtn_home';
